<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ping web端测试程序</title>
    <style>
      #outputBox {
        max-height: 10em; /* 假设一行的高度为 1em，设置最大高度为 10 行 */
        overflow-y: auto; /* 启用垂直滚动条 */
        width: 80%; /* 设置宽度 */
      }
    </style>
  </head>

  <body>
    <div>
      <label>address :</label>
      <input type="text" id="input_address" placeholder="请输入 ip/域名" />
    </div>
    <div>
      <label>-c count :</label>
      <input type="text" id="input_count" placeholder="测试访问次数,默认为5" />
    </div>
    <div>
      <label>-w timeout :</label>
      <input
        type="text"
        id="input_timeout"
        placeholder="测试超时时间,默认为8s"
      />
    </div>
    <div>
      <button type="button" id="button_start">start</button>
    </div>
    <div>
      <textarea id="outputBox" rows="10" readonly></textarea>
    </div>
    <script>
      window.onload = function () {
        var address = document.getElementById("input_address");
        var count = document.getElementById("input_count");
        var timeout = document.getElementById("input_timeout");
        var button = document.getElementById("button_start");
        var outputBox = document.getElementById('outputBox');
        var cmd_start = true;

        let intervalId;
        const checkData = () => {
            // 获取输入框的内容
            var address_value = address.value;
            var count_value = count.value;
            var timeout_value = timeout.value;
            if (address_value === "") {
              alert("请输入 ip/域名");
              return;
            }
            if (count_value === "") {
              count_value = 5;
            }
            if (timeout_value === "") {
              timeout_value = 8;
            }
            console.log(
              "按钮已被点击, address: " +address_value +", count: " +count_value +", timeout: " +timeout_value
            );

            // 将输入内容转换为 JSON 数据
            var jsonData = JSON.stringify({ "ip": address_value, "count": count_value, "timeout": timeout_value, "cmd_start": cmd_start});
            // 发送请求
            fetch('/ping_start', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: jsonData
            })
           .then(response => response.json())
           .then(data => {
                // 将响应数据显示在输出框中
                // data 是一个json对象
                console.log("data=",data);
                if (data.status == "finish")
                {
                    console.log("cmd finish");
                    clearInterval(intervalId);
                }
                outputBox.value += data.msg + '\n';
                cmd_start = false;
            })
           .catch(error => {
                console.error('Error:', error);
                outputBox.value = '请求失败，请检查网络或服务器状态。';
            });
        };

        button.addEventListener("click", function () {
          cmd_start = true;
          intervalId = setInterval(checkData, 1000);
        });
      };
    </script>
  </body>
</html>
